import React,{Component} from 'react'
import '../css/register.css'
import { Form, Icon, Input, Button, Checkbox,Tooltip, message} from 'antd';
import {NavLink} from 'react-router-dom'
import * as api from '../api/userInfo'
import axios from 'axios';
class Login extends Component{
    constructor(props){
        super(props)
    }
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
          }
        });
      };
      getFieldsValue(){
        let isRem = this.props.form.getFieldValue('remember')
        let userName = this.props.form.getFieldValue('userName')
        let password = this.props.form.getFieldValue('password')
        let userInfo = {
          userName:userName,
          password:password
        }
        api.Login(userInfo).then(data=>{
          if(data.data.code=='success'){
            console.log('登陆成功')
            if(isRem == true){
              for(let i in userInfo){
                localStorage.setItem(i,userInfo[i])
              }
            }else{
              for(let i in userInfo){
                localStorage.setItem(i,'')
              }
            }
            localStorage.setItem('token',data.data.token)
            localStorage.setItem('isRemember',isRem)
            message.success('登陆成功,即将跳转页面',1,()=>{
              this.props.history.push('/home')
            })
          }else{
            console.log('登陆失败')
            message.warning('用户名或密码输入错误',()=>{
              this.props.form.setFieldsValue({['userName']:''})
              this.props.form.setFieldsValue({['password']:''})
            })
           
          }
        })
      }
      componentDidMount(){
        let isRem = localStorage.getItem('isRemember')
        if(isRem == 'true'){
          let userName = localStorage.getItem('userName')
          let password = localStorage.getItem('password')
          this.props.form.setFieldsValue({['userName']:userName})
          this.props.form.setFieldsValue({['password']:password})
        }
      }
    render(){
        const { getFieldDecorator } = this.props.form;
        return(
          <div className="pic_bg">
            <div className="box">
                <h2>欢迎回来！    请登录</h2>
                <Form onSubmit={this.handleSubmit} className="login-form">
                  <Form.Item label="userName">
                  {getFieldDecorator('userName', {
                    rules: [{ required: true, message: 'Please input your username!' }],
                    })(
                    <Input
                      prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                      placeholder="Username"
                    />,
                  )}
                  </Form.Item>
                  <Form.Item label="Password" hasFeedback>
                    {getFieldDecorator('password', {
                      rules: [
                        {
                          required: true,
                          message: 'Please input your password!',
                        },
                        {
                          validator: this.validateToNextPassword,
                        },
                      ],
                    })(<Input.Password />)}
                  </Form.Item>
                  <Form.Item>
                  {getFieldDecorator('remember', {
                      valuePropName: 'checked',
                      initialValue: true,
                    })(<Checkbox>Remember me</Checkbox>)}
                    <Button type="primary" onClick={()=>this.getFieldsValue()} htmlType="submit" className="login-form-button" >
                      登录
                    </Button>
                    <NavLink to="/register">我要注册</NavLink>
                  </Form.Item>
                </Form>
              </div>
            </div>
        )
    }
}
const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(Login)
export default WrappedNormalLoginForm